<template>
  <a-card :bordered="false" :bodyStyle="bodyStyle">
    <a-table
      :scroll="{y: height, x: true}"
      rowKey="userKey"
      size="small"
      bordered
      :pagination="ipagination"
      :loading="loading"
      :columns="columns"
      :dataSource="dataSource"
      :rowSelection="{selectedRowKeys: computedKeys, onChange: onSelectChange, type: (isRadio ? 'radio' : 'checkbox')}"
      @change="handleTableChange">
      <template slot="serialNum" slot-scope="text,record,index">
        {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
      </template>
    </a-table>

  </a-card>
</template>

<script>

  import { YcListMixin } from '@/mixins/YcListMixin'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'SelectUserTreeRight',
    mixins: [YcListMixin],
    props: {
      value: {
        type: Array,
        required: true
      },
      currentDeptId: {
        type: String,
        default: null
      },
      deptSearchKey:{
        type: String,
        default: null
      },
      currentRoleId: {
        type: String,
        default: null
      },
      currentPositionId: {
        type: String,
        default: null
      },
      isRadio: {
        type: Boolean,
        default: false
      },
      conditionIds:{
        type:String,
        default:''
      },
      height: {
        type: Number,
        default: 300
      },
    },
    data () {
      return {
        bodyStyle: {
          padding: '5px 0 0 24px',
          margin: 0
        },
        disableMixinCreated: true,
        columns: [{
          title:this.$t('m.common.label.number'),
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          scopedSlots: { customRender: 'serialNum' },
        }, {
          title: this.$t('m.system.user.entity.realname'),
          align: 'center',
          width: 120,
          dataIndex: 'name'
        }, {
          title: this.$t('m.system.org.entity.depName'),
          align: 'center',
          width: 120,
          dataIndex: 'deptName'
        },{
          title: this.$t('m.system.user.entity.workNo'),
          align: 'center',
          width: 120,
          dataIndex: 'workNo'
        },],
        url: {
          getUserListByDeptIdByPage: YchConstant.PREFIX_BPM + '/bpm-front/displayRest/getUserListByDeptIdByPage/v1',
          getUserListByRoleIdByPage: YchConstant.PREFIX_BPM + '/bpm-front/displayRest/getUserListByRoleIdByPage/v1',
          getUserListByPositionIdByPage: YchConstant.PREFIX_BPM + '/bpm-front/displayRest/getUserListByPositionIdByPage/v1'
        }
      }
    },
    watch: {
      currentDeptId: {
        immediate: true,
        handler (value) {
          if (value) {
            this.$emit("resetSearchKey")
            this.queryParam = {
              deptId: value,
              conditionIds:this.conditionIds
            }
            this.url.list = this.url.getUserListByDeptIdByPage
            this.loadData(1)
          }
        }
      },
      currentRoleId: {
        immediate: true,
        handler (value) {
          if (value) {
            this.$emit("resetSearchKey")
            this.queryParam = {
              id: value
            }
            this.url.list = this.url.getUserListByRoleIdByPage
            this.loadData()
          }
        }
      },
      currentPositionId: {
        immediate: true,
        handler (value) {
          if (value) {
            this.$emit("resetSearchKey")
            this.queryParam = {
              id: value
            }
            this.url.list = this.url.getUserListByPositionIdByPage
            this.loadData(1)
          }
        }
      },
    },
    computed: {
      computedKeys () {
        return this.value.map(item => item.userKey)
      }
    },
    methods: {
      onSelectChange (selectedRowKeys, selectedRows) {
        if (this.isRadio) {
          const data = [{
            id: selectedRows[0].id,
            name: selectedRows[0].name,
            deptId: selectedRows[0].deptId,
            deptName: selectedRows[0].deptName,
            userKey: selectedRows[0].userKey
          }]
          this.$emit('input', data)
        } else {
          const oldKeys = this.computedKeys
          const data = this.value.filter(item => selectedRowKeys.indexOf(item.userKey) != -1)//原来剩下的
          const addIds = selectedRowKeys.filter(id => oldKeys.indexOf(id) == -1)//新增的
          selectedRows.forEach(item => {
            if (addIds.indexOf(item.userKey) != -1) {
              data.push({
                id: item.id,
                name: item.name,
                deptId: item.deptId,
                deptName: item.deptName,
                userKey: item.userKey
              })
            }
          })
          this.$emit('input', data)
        }
      },
      searchReset () {
        this.queryParam.name = ''
        this.loadData(1)
      },
      searchDeptUserByKey(value){
        this.queryParam = {
          name: value,
          conditionIds:this.conditionIds
        }
        this.url.list = this.url.getUserListByDeptIdByPage
        this.loadData()
      },
      searchRoleUserByKey(value){
        this.queryParam = {
          name: value,
          conditionIds:this.conditionIds
        }
        this.url.list = this.url.getUserListByRoleIdByPage
        this.loadData()
      },
      searchPositionUserByKey(value){
        this.queryParam = {
          name: value,
          conditionIds:this.conditionIds
        }
        this.url.list = this.url.getUserListByPositionIdByPage
        this.loadData()
      }
    }
  }
</script>
<style scoped>
.ant-table td { white-space: nowrap; }
</style>
